<html>
  <head>
    <style></style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
      html,body { margin: 0; padding: 0; }
      .box canvas {
        border-right: 1px solid #aaaaaa40;
        border-bottom: 1px solid #aaaaaa40;
        background-image:
        linear-gradient(#aaaaaa40 1px, transparent 0),
        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
        linear-gradient(#aaa 1px, transparent 0),
        linear-gradient(90deg, #aaa 1px, transparent 0);
        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
      }
      .list {
        width: 910px;
        overflow: hidden;
        border-top: 1px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
      }
      .box {
        width: 300;
        min-height: 220;
        float: left;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 0;
      }
      .box .title {
        text-align: center;
        font-size: 14px;
        color: #000;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        width: 100%;
        font-family: monospace;
      }
    </style>
  </head>
  <body>

    <div class="list">
      <div class="box" id="mount-image">
        <div class="title">Image</div>
      </div>
      <div class="box" id="mount-svg">
        <div class="title">SVG</div>
      </div>
      <div class="box" id="mount-html">
        <div class="title">HTML</div>
      </div>

      <div class="box" id="mount-image-update">
        <div class="title">Image: update</div>
      </div>
      <div class="box" id="mount-svg-update">
        <div class="title">SVG: update</div>
      </div>
      <div class="box" id="mount-html-update">
        <div class="title">HTML: update</div>
      </div>
     
    </div>

    <script src="../../../packages/core/dist/index.global.js"></script>
    <script>
      const { Core } = window.iDrawCore;
      var opts = {
        width: 300,
        height: 200,
        contextWidth: 300,
        contextHeight: 200,
        devicePixelRatio: 4,
      }
      var config = {
        elementWrapper: {
          controllerSize: 4,
        }
      }
    </script>
 
    <script>
      (function() {
        const mount = document.querySelector('#mount-image');
        const core = new Core(mount, opts, config);
        core.addElement({
          name: "image-001",
          x: 4,
          y: 4,
          w: 200,
          h: 120,
          type: "image",
          desc: {
            src: './../images/building-001.png'
          },
        });
        core.addElement({
          name: "image-002",
          x: 120,
          y: 80,
          w: 120,
          h: 120,
          type: "image",
          desc: {
            src: './../images/building-002.png'
          },
        });

        setTimeout(() => {
          const data = core.getData();
          const temp1 = data.elements[0].desc.src + '?v=123';
          const temp2 = data.elements[1].desc.src + '?v=123'
          data.elements[0].desc.src = temp2;
          data.elements[1].desc.src = temp1;
          core.setData(data);
        }, 100);
      })();
    </script>

    <script>
      (function() {
        const mount = document.querySelector('#mount-svg');
        const core = new Core(mount, opts, config);
        core.addElement({
          name: "svg-001",
          x: 4,
          y: 4,
          w: 120,
          h: 120,
          type: "svg",
          desc: {
            svg: '<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>'
          },
        });
        core.addElement({
          name: "svg-002",
          x: 120,
          y: 80,
          w: 120,
          h: 120,
          type: "svg",
          desc: {
            svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>'
          },
        });

        setTimeout(() => {
          const data = core.getData();
          const temp1 = data.elements[0].desc.svg;
          const temp2 = data.elements[1].desc.svg;
          data.elements[0].desc.svg = temp2;
          data.elements[1].desc.svg = temp1;
          core.setData(data);
        }, 100);
      })();
    </script>

    <script>
      (function() {
        const mount = document.querySelector('#mount-html');
        const core = new Core(mount, opts, config);
        core.addElement({
          name: "html-001",
          x: 4,
          y: 4,
          w: 120,
          h: 60,
          type: "html",
          desc: {
            html: `<style>
        .btn-box {
          margin: 10px 0;
        }
        .btn {
          line-height: 1.5715;
          position: relative;
          display: inline-block;
          font-weight: 400;
          white-space: nowrap;
          text-align: center;
          background-image: none;
          border: 1px solid transparent;
          box-shadow: 0 2px #00000004;
          cursor: pointer;
          user-select: none;
          height: 32px;
          padding: 4px 15px;
          font-size: 14px;
          border-radius: 2px;
          color: #000000d9;
          background: #fff;
          border-color: #d9d9d9;
        }
        .btn-primary {
          color: #fff;
          background: #1890ff;
          border-color: #1890ff;
          text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
          box-shadow: 0 2px #0000000b;
        }
        </style>
        <div>
          <div class="btn-box" style="margin-top: 0;">
            <button class="btn" >
              <span>Button 001</span>
            </button>
          </div>

          <div class="btn-box">
            <button class="btn btn-primary">
              <span>Button Primary</span>
            </button> 
          </div>
        </div>
        `
          },
        });
        core.addElement({
          name: "html-002",
          x: 120,
          y: 80,
          w: 120,
          h: 60,
          type: "html",
          desc: {
            width: 120,
            height: 80,
            html: `<style>
        .btn-box {
          margin: 10px 0;
        }
        .btn {
          line-height: 1.5715;
          position: relative;
          display: inline-block;
          font-weight: 400;
          white-space: nowrap;
          text-align: center;
          background-image: none;
          border: 1px solid transparent;
          box-shadow: 0 2px #00000004;
          cursor: pointer;
          user-select: none;
          height: 32px;
          padding: 4px 15px;
          font-size: 14px;
          border-radius: 2px;
          color: #000000d9;
          background: #fff;
          border-color: #d9d9d9;
        }
        .btn-primary {
          color: #fff;
          background: #1890ff;
          border-color: #1890ff;
          text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
          box-shadow: 0 2px #0000000b;
        }
        </style>
        <div>
          <div class="btn-box" style="margin-top: 0;">
            <button class="btn" >
              <span>Button 002</span>
            </button>
          </div>

          <div class="btn-box">
            <button class="btn btn-primary">
              <span>Button Primary</span>
            </button> 
          </div>
        </div>
        `
          },
        });

        setTimeout(() => {
          const data = core.getData();
          const temp1 = data.elements[0].desc.html;
          const temp2 = data.elements[1].desc.html;
          data.elements[0].desc.html = temp2;
          data.elements[1].desc.html = temp1;
          core.setData(data);

          setTimeout(() => {
            const data = core.getData();
            data.elements[0].desc.height = 50;
            data.elements[1].desc.height = 100;
            core.setData(data);
          }, 100);
        }, 100);
      })();
    </script>


    <script>
      (function() {
        const mount = document.querySelector('#mount-image-update');
        const core = new Core(mount, opts, config);
        core.addElement({
          name: "image-001",
          x: 4,
          y: 4,
          w: 200,
          h: 120,
          type: "image",
          desc: {
            src: './../images/building-001.png'
          },
        });
        core.addElement({
          name: "image-002",
          x: 120,
          y: 80,
          w: 120,
          h: 120,
          type: "image",
          desc: {
            src: './../images/building-002.png'
          },
        });

        setTimeout(() => {
          const data = core.getData();
          console.log('data ====', data);
          const temp1 = data.elements[0].desc.src + '?v=456';
          const temp2 = data.elements[1].desc.src + '?v=456'
          data.elements[0].desc.src = temp2;
          data.elements[1].desc.src = temp1;

          core.updateElement(data.elements[0]);
          core.updateElement(data.elements[1]);

          // setTimeout(() => {
          //   core.updateElement(data.elements[1]);
          // }, 200);
        }, 100);
      })();
    </script>

    <script>
      (function() {
        const mount = document.querySelector('#mount-svg-update');
        const core = new Core(mount, opts, config);
        core.addElement({
          name: "svg-001",
          x: 4,
          y: 4,
          w: 120,
          h: 120,
          type: "svg",
          desc: {
            svg: '<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>'
          },
        });
        core.addElement({
          name: "svg-002",
          x: 120,
          y: 80,
          w: 120,
          h: 120,
          type: "svg",
          desc: {
            svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>'
          },
        });

        setTimeout(() => {
          const data = core.getData();
          const temp1 = data.elements[0].desc.svg;
          const temp2 = data.elements[1].desc.svg;
          data.elements[0].desc.svg = temp2;
          data.elements[1].desc.svg = temp1;
          
          core.updateElement(data.elements[1]);
          core.updateElement(data.elements[0]);
        }, 100);
      })();
    </script>

    <script>
      (function() {
        const mount = document.querySelector('#mount-html-update');
        const core = new Core(mount, opts, config);
        core.addElement({
          name: "html-001",
          x: 4,
          y: 4,
          w: 120,
          h: 60,
          type: "html",
          desc: {
            html: `<style>
        .btn-box {
          margin: 10px 0;
        }
        .btn {
          line-height: 1.5715;
          position: relative;
          display: inline-block;
          font-weight: 400;
          white-space: nowrap;
          text-align: center;
          background-image: none;
          border: 1px solid transparent;
          box-shadow: 0 2px #00000004;
          cursor: pointer;
          user-select: none;
          height: 32px;
          padding: 4px 15px;
          font-size: 14px;
          border-radius: 2px;
          color: #000000d9;
          background: #fff;
          border-color: #d9d9d9;
        }
        .btn-primary {
          color: #fff;
          background: #1890ff;
          border-color: #1890ff;
          text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
          box-shadow: 0 2px #0000000b;
        }
        </style>
        <div>
          <div class="btn-box" style="margin-top: 0;">
            <button class="btn" >
              <span>Button 001</span>
            </button>
          </div>

          <div class="btn-box">
            <button class="btn btn-primary">
              <span>Button Primary</span>
            </button> 
          </div>
        </div>
        `
          },
        });
        core.addElement({
          name: "html-002",
          x: 120,
          y: 80,
          w: 120,
          h: 60,
          type: "html",
          desc: {
            width: 120,
            height: 80,
            html: `<style>
        .btn-box {
          margin: 10px 0;
        }
        .btn {
          line-height: 1.5715;
          position: relative;
          display: inline-block;
          font-weight: 400;
          white-space: nowrap;
          text-align: center;
          background-image: none;
          border: 1px solid transparent;
          box-shadow: 0 2px #00000004;
          cursor: pointer;
          user-select: none;
          height: 32px;
          padding: 4px 15px;
          font-size: 14px;
          border-radius: 2px;
          color: #000000d9;
          background: #fff;
          border-color: #d9d9d9;
        }
        .btn-primary {
          color: #fff;
          background: #1890ff;
          border-color: #1890ff;
          text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
          box-shadow: 0 2px #0000000b;
        }
        </style>
        <div>
          <div class="btn-box" style="margin-top: 0;">
            <button class="btn" >
              <span>Button 002</span>
            </button>
          </div>

          <div class="btn-box">
            <button class="btn btn-primary">
              <span>Button Primary</span>
            </button> 
          </div>
        </div>
        `
          },
        });

        setTimeout(() => {
          const data = core.getData();
          const temp1 = data.elements[0].desc.html;
          const temp2 = data.elements[1].desc.html;
          data.elements[0].desc.html = temp2;
          data.elements[1].desc.html = temp1;
          core.setData(data);

          setTimeout(() => {
            const data = core.getData();
            data.elements[0].desc.height = 50;
            data.elements[1].desc.height = 100;
            core.updateElement(data.elements[0]);
            core.updateElement(data.elements[1]);
          }, 100);
        }, 100);
      })();
    </script>

  
  </body>
</html>